<html>
<!-- Using a <blockquote> because it's an obscure tag -->
<!-- which allows us to use document.querySelector()  -->
<!-- with generic tags freely inside Cypress tests.   -->
<blockquote id="root">
  <!-- This is where our test subjects will be injected. -->
</blockquote>

<script>
  root = document.querySelector('#root')

  // We aren't loading Alpine directly because we are expecting
  // Cypress to inject HTML into "#root", THEN we'll call
  // this function from Cypress to boot everything up.
  root.bootAlpine = (bootstrap = null) => {
    document.addEventListener('alpine:initialized', () => {
      let readyEl = document.createElement('blockquote')
      readyEl.setAttribute('alpine-is-ready', true)
      readyEl.style.width = '1px'
      readyEl.style.height = '1px'

      document.getElementById('root').after(readyEl)
    })

    let script = document.createElement('script')
    script.type = 'module'
    script.innerHTML = bootstrap ?? `
      import Alpine from '../../node_modules/alpinejs/dist/module.esm.js'
      import ajax from '../../dist/module.esm.js'

      Alpine.plugin(ajax)
      window.Alpine = Alpine
      Alpine.start()
    `;
    root.after(script)
  }
</script>

</html>
